<script setup>
import { ref, toRefs, reactive } from "vue";
const isCls = true;
const size = 20;
const imgUrl = ref(
  "https://img2.pconline.com.cn/pconline/0710/16/1129881_071018jay28.jpg"
);
const name = "jj";
</script>

<template>
  <div>
    <!-- 
    v-bind:给标签添加动态属性
    v-bind:属性名=“{属性名1：布尔值，属性值2：布尔值}”
    v-bind:属性名=“[布尔值？属性名1：属性名2]”
    -->
    <h4>成绩</h4>
    <ul>
      <!-- style绑定 -->
      <li v-bind:style="{ fontSize: size + 'px' }">语文：99</li>
      <!-- class绑定 -->
      <li class="li" v-bind:class="{ act: true, app: true }">数学：120</li>
      <li class="li" v-bind:class="[isCls ? 'act' : 'app']">英语：100</li>
      <!-- 简写 -->
      <li class="li" :class="[isCls ? 'act' : 'app']">物理：88</li>
      <!-- 绑定其他属性 -->
      <img v-bind:src="imgUrl" alt="" />
    </ul>
    <!-- 
    其他指令
    v-pre:不会解析标签中的特殊语法，比如{{  }}
    v-once:只会渲染一次，数据变化后不会同步更新
    v-cloak:用于隐藏尚未完成编译的DOM模版
    v-memo:缓存，提升性能的
    -->
    <p v-pre>{{ name }}</p>
    <p v-once></p>
    <p v-cloak>{{ name }}</p>
    <p v-memo></p>
  </div>
</template>

<style scoped>
li {
  list-style: none;
}
.act {
  color: red;
}
img {
  width: 300px;
}
</style>
<!-- 
常用指令：
v-on/@：绑定事件
v-model：双向数据绑定
v-bind：给标签绑定动态属性

v-for：循环渲染数据
v-if/v-else/v-else-if：条件渲染
v-show：控制元素的显隐状态
v-text：渲染普通数据
v-html：渲染普通数据，可以解析html标签
v-slot:插槽

v-pre:不会解析标签中的特殊语法，比如{{  }}
v-once:只会渲染一次，数据变化后不会同步更新
v-cloak:用于隐藏尚未完成编译的DOM模版
v-memo:缓存，提升性能的
-->
